<template>
<section v-loading="loading">
   <!-- 查询框 -->
   <div class="searchbox">
      <el-form :inline="true" :model="query" class="demo-form-inline fl">
         <el-form-item>
            <el-select v-model="query.pay_type" placeholder="支付方式" size="medium">
               <el-option label="全部" value=""></el-option>
               <el-option label="微信支付" value="1"></el-option>
               <el-option label="支付宝" value="2"></el-option>
               <el-option label="线下支付" value="3"></el-option>
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-select v-model="query.status" placeholder="订单状态" size="medium">
               <el-option label="全部" value=""></el-option>
               <el-option label="未支付" value="0"></el-option>
               <el-option label="已支付" value="1"></el-option>
               <el-option label="已取消" value="-1"></el-option>
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-date-picker v-model="query.time" type="daterange" unlink-panels size="medium"
               start-placeholder="开始日期" range-separator="--" end-placeholder="结束日期">
            </el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" size="small" @click="getData" icon="el-icon-search">搜&nbsp;&nbsp;索</el-button>
         </el-form-item>
      </el-form>
      <!-- <el-button type="primary" size="small" class="fr" icon="el-icon-plus">添&nbsp;&nbsp;加</el-button> -->
   </div>
   <!-- 主体内容 -->
   <div @contextmenu="$parent.addMenu([{name:'刷新订单记录',method:'getData',icon:'icon-shuaxin'}])">
   <el-table ref="multipleTable" :data="listData" tooltip-effect="dark" style="text-align:center">
      <el-table-column prop="order_no" label="订单号" min-width="12%" ></el-table-column>
      <el-table-column prop="title" label="订单名称" min-width="15%" ></el-table-column>
      <el-table-column prop="amount" label="金额" min-width="12%" ></el-table-column>
      <el-table-column  label="创建时间" min-width="15%" >
         <template slot-scope="scope">{{ scope.row.create_time|date('Y-m-d H:i') }}</template>
      </el-table-column>
      <el-table-column label="支付时间" min-width="15%" >
         <template slot-scope="scope" v-if="scope.row.pay_time != 0">{{ scope.row.pay_time|date('Y-m-d H:i') }}</template>
      </el-table-column>
      <el-table-column label="支付方式" min-width="12%" >
         <template slot-scope="scope">
            <div v-if = "scope.row.pay_type==1">微信支付</div>
            <div v-else-if = "scope.row.pay_type == 2">支付宝</div>
            <div v-else-if = "scope.row.pay_type == 3">线下支付</div>
         </template>
      </el-table-column>
      <el-table-column label="状态" min-width="12%" >
         <template slot-scope="scope">
            <div v-if = "scope.row.status==0">未支付</div>
            <div v-else-if = "scope.row.status == 1">已支付</div>
            <div v-else-if = "scope.row.status == -1">已取消</div>
         </template>
      </el-table-column>
   </el-table>
   <!-- 分页 -->
   <div class="breakpage" v-if="page.total>0">
      <el-pagination layout="total, prev, pager, next" background :current-page="parseInt(page.curpage)"
         :page-size="parseInt(page.pagesize)" :total="parseInt(page.total)" @current-change="handleCurrentChange" >
      </el-pagination>
   </div>
 </div>
</section>
</template>

<script>
import * as api from '../api/index';
import { date } from '../lib/function';
export default {
   name: 'order',
   data() {
      return {
         m: 'order',
         query: {}, //搜索数据
         multipleSelection: [],
         editVisible: false,
         edit: {},
      }
   },
   computed: {
      listData() {
         return this.$store.state[this.m].data;
      },
      page() {
         return this.$store.state[this.m].page;
      },
      loading() {
         return this.$store.state[this.m].loading;
      }
   },
   methods: {
      handleSelectionChange(val) {
         this.multipleSelection = val;
      },
      getData() { //更新列表数据
         this.$store.dispatch(
            this.m + '/getData',
            JSON.parse(JSON.stringify(this.query)),
         );
      },
      update(){
         let _this = this;
         api.order.update(_this.edit, res => {
            if (res.status == 1) {
               _this.getData();
               _this.editVisible = false;
            }
            else _this.$message(res);
         });
      },
      handleCurrentChange(p){
         this.query.p = p;
         this.getData();
      },
   },
   filters: {
      date
   },
   created() {
     if(this.$parent.school.current.id==undefined||this.$store.state[this.m].school_id!=this.$parent.school.current.id) {
       this.query={};
       this.getData();
       this.$store.commit(this.m+'/update',{type:'school_id',data:this.$parent.school.current.id});
     }else{
       this.query=JSON.parse(JSON.stringify(this.$store.state[this.m].query));
     }
   }
}
</script>
